<template>
  <div class="merchant-details">
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="签到记录" size="70%" class="box-drawer"
      :with-header="false" :visible.sync="drawerLoading" :show-close="true" @close="cloneDrawer">
      <!--      头部-->
      <div style="position: relative">
        <div class="drawerTitle">
          <span>签到记录</span>
          <div class="close" @click="cloneDrawer">
            <i class="el-icon-close" style="font-size: 24px;" />
          </div>
        </div>
      </div>
      <!--列表 -->
        <div class="container-module">
          <el-form :inline="true" class="search-form" size="small">
            <el-row style="display: flex">
              <div style="flex: 1">
                <el-form-item class="search-form-item" label="用户昵称" style="margin: 5px 0">
                  <el-input clearable placeholder="请输入昵称" v-model="searchForm.params.name" class="input-with-select">
                  </el-input>
                </el-form-item>
                <el-form-item
                  class="search-form-item"
                  label="奖励类型"
                  style="margin: 5px 0"
                >
                  <el-select
                    clearable
                    v-model="searchForm.params.reward_type"
                    placeholder="请选择奖励类型"
                  >
                    <el-option
                      v-for="item in [
                        { name: '积分', id: 1 },
                        { name: '抽奖次数', id: 2 },
                        { name: '积分转化卡', id: 3 },
                      ]"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div style="padding: 5px 0">
                <el-form-item>
                  <el-button size="small" type="primary" icon="el-icon-search" @click="getinventorylist">查询</el-button>
                  <el-button size="small" type="primary" icon="el-icon-refresh" @click="resetting">重置</el-button>
                </el-form-item>
              </div>
            </el-row>
          </el-form>
        </div>
        <el-divider></el-divider>
        <div style="padding: 0 20px">
          <div class="marginBottom">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="16">
                <div class="left-panel">
                  <el-button type="text"></el-button>
                </div>
              </el-col>
              <el-col :xs="24" :sm="8">
                <div class="right-panel el-button-group">
                  <el-button class="" icon="el-icon-refresh" size="mini" @click="refresh"></el-button>
                  <el-dropdown trigger="click" :hide-on-click="false">
                    <span class="el-dropdown-link">
                      <el-button class="" icon="el-icon-s-operation" size="mini"></el-button>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                        <el-checkbox v-model="checkboxTableThead"
                          :label="fruit">{{ tableTheadOptions[fruit].label }}</el-checkbox>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </el-col>
            </el-row>
          </div>

          <el-row :gutter="20">
            <el-col class="new_table_card">
              <el-table v-loading="loading" highlight-current-row :data="inventorylist" :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }" style="width: 100%" height="100%">
                <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label"
                  :width="
                  tableTheadOptions[fruit].width
                    ? tableTheadOptions[fruit].width + 'px'
                    : 'auto'
                " align="center">
                  <template slot-scope="scope">
                    <div v-if="fruit == 'reward_type'">
                      <span v-if="scope.row.reward_type.includes('1')">积分&nbsp;</span>
                      <span v-if="scope.row.reward_type.includes('2')">抽奖次数&nbsp;</span>
                      <span v-if="scope.row.reward_type.includes('3')">积分转化卡&nbsp;</span>
                    </div>
                    <div v-else-if="fruit == 'user_info'">
                      <span>{{scope.row.user_info.nickname}}</span>
                    </div>
                    <div v-else>
                      <el-tooltip placement="top" :content="
                        scope.row[fruit] ? scope.row[fruit].toString() : '-'
                      ">
                        <div class="one_line_hidden">
                          {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                        </div>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
              </el-table></el-col>
            <el-col>
              <pagination v-show="total > 0" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.count"
                @pagination="getinventorylist" />
            </el-col>
          </el-row>
        </div>
    </el-drawer>
  </div>
</template>
<script>
  import {
    signLog
  } from '@/api/activity/index'
  const tableTheadOption = {
    id: {
      label: "ID",
      field: "id",
    },
    user_id: {
      label: "用户ID",
      field: "user_id",
    },
    user_info: {
      label: "用户昵称",
      field: "user_info",
    },
    cu_day: {
      label: "连签天数",
      field: "cu_day",
    },
    reward_type: {
      label: "奖励类型",
      field: "reward_type",
    },
    integral_num: {
      label: "奖励积分",
      field: "integral_num",
    },
    lottery_num: {
      label: "抽奖次数",
      field: "lottery_num",
    },
    // cu_day: {
    //   label: "积分转化卡",
    //   field: "cu_day",
    // },
    sign_date: {
      label: "签到时间",
      field: "sign_date",
    },
  };
  const allTableThead = ["id", "user_id","user_info","cu_day", "reward_type", "integral_num","lottery_num","sign_date"];
  const defaultTableThead = ["id", "user_id","user_info","cu_day","reward_type", "integral_num","lottery_num","sign_date"];
  export default {
    name: 'saveInventory',
    components: {

    },
    data() {
      return {
        loading:false,
        searchForm:{
          id:'',
          page:1,
          count:10,
          params:{
            name:'',
            reward_type:''
          }
        },
        total:0,
        drawerLoading: false,
        inventorylist:[],
        tableTheadOptions: tableTheadOption,
        allTableThead: allTableThead,
        tableThead: defaultTableThead, // 默认表头
        checkboxTableThead: defaultTableThead, // 默认表头值
      }
    },
    watch: {
      checkboxTableThead(valArr) {
        this.tableThead = this.allTableThead.filter(
          (i) => valArr.indexOf(i) >= 0
        );
        this.tableKey = this.tableKey + 1; // 为了保证table 每次都会重渲
      },
    },
    created() {},
    methods: {
      //库存列表
      getinventorylist(){
        this.loading = true
          signLog(this.searchForm).then((res) => {
            this.loading = false
          this.inventorylist = res.data.list
          this.total = res.data.total
        })
      },
      resetting(){
        this.searchForm.page = 1
        this.searchForm.count = 10
        this.searchForm.params.name = ''
        this.searchForm.params.reward_type = ''

        this.getinventorylist();
      },
      refresh(){
        this.searchForm.page = 1
        this.searchForm.count = 10
        this.getinventorylist();
      },
      //接收父组件传的值
      open(row) {
        this.drawerLoading = true
        this.searchForm.id = row.id
        this.loading = true
        signLog(this.searchForm).then((res) => {
          this.loading = false
          this.inventorylist = res.data.list
          this.total = res.data.total
        })
      },
      cloneDrawer() {
        this.searchForm.page = 1
        this.searchForm.count = 10
        this.searchForm.params.name = ''
        this.searchForm.params.reward_type = ''
        this.drawerLoading = false
      },
    }
  }
</script>
<style lang="scss">
  .container-module {
    padding: 20px 20px 0 30px;
  }
</style>
